import {reactive} from 'vue';

interface DefaultPaginationData {
    total: number;
    currentPage: number;
    pageSizes: number[];
    pageSize: number;
    layout: string;
}

interface PaginationData {
    total?: number;
    currentPage?: number;
    pageSizes?: number[];
    pageSize?: number;
    layout?: string;
}

/** 默认的分页参数 */
const defaultPaginationData: DefaultPaginationData = {
    total: 0,
    currentPage: 1,
    pageSizes: [10, 20, 50],
    pageSize: 10,
    layout: 'total, sizes, prev, pager, next, jumper'
};

export function usePagination(initialPaginationData: PaginationData = {}) {
    /** 合并分页参数 */
    const paginationData = reactive({...defaultPaginationData, ...initialPaginationData});
    /** 改变当前页码 */
    const handleCurrentChange = (value: number) => {
        paginationData.currentPage = value;
    };
    /** 改变页面大小 */
    const handleSizeChange = (value: number) => {
        paginationData.pageSize = value;
    };

    return {paginationData, handleCurrentChange, handleSizeChange};
}
